import React from "react"
import houtui from "../My/img/后退 (2).png"
import gedansousuo from "../My/img/歌单搜索.png"
import bofang from "../My/img/播放.png"
import shoucang from "../My/img/收 藏.png"
import pinglun from "../My/img/评论.png"
import share from "../My/img/分享.png"
import xiazai from "../My/img/下载管理.png"
import duoxuan from "../My/img/多选 选中.png"
import Mycss from "../My/style/index.module.css"
import "../../assets/style/index.css"
// import Song from "./song"
// import {Route} from "react-router-dom"
import { NoticeBar, WhiteSpace, Icon } from 'antd-mobile';

// import { Popover, NavBar, Icon } from 'antd-mobile';
// const Item = Popover.Item;

// const myImg = src => <img src={`https://gw.alipayobjects.com/zos/rmsportal/${src}.svg`} className="am-icon am-icon-xs" alt="" />;
class Playlist extends React.Component{
    constructor(){
        super()
        this.state={
            fengmian:"",
            gedanming:"",
            zuozhe:"",
            zuozhetouxiang:"",
            description:"",
            yigong:"",
            shoucangliang:"",
            gequ:[],
            pinglun:"",
            share:""
        }
    }
    componentWillMount(){
      const playlistid=this.props.location.playlistid
        fetch(`http://106.12.79.128:666/playlist/detail?id=${playlistid}`)
        .then(body=>body.json())
        .then(res=>{
          console.log(res.privileges[0].id);
            this.setState({
                fengmian:res.playlist.coverImgUrl,
                gedanming:res.playlist.name,
                zuozhe:res.playlist.creator.nickname,
                zuozhetouxiang:res.playlist.creator.avatarUrl,
                description:res.playlist.description,
                yigong:res.privileges.length,
                shoucangliang:res.playlist.subscribedCount,
                gequ:res.playlist.tracks,
                pinglun:res.playlist.commentCount,
                share:res.playlist.shareCount
            })
        })
    }
    back(){
      // const id=this.props.location.id/
      // const id = localStorage.getItem("userid");
      // const uid=this.props.location.userid
        // this.props.history.push("/gen/My")
        this.props.history.goBack();
        
    }
    sendId(songid){
      const playlistid=this.props.location.playlistid
      // const id=this.props.location.id
      // console.log(id)
      console.log(songid)
      console.log(playlistid)

      this.props.history.push({pathname:"/song",songid,playlistid})
      
    }
    //气泡组件
    // state = {
    //     visible: false,
    //     selected: '',
    //   };
    //   onSelect = (opt) => {
    //     // console.log(opt.props.value);
    //     this.setState({
    //       visible: false,
    //       selected: opt.props.value,
    //     });
    //   };
    //   handleVisibleChange = (visible) => {
    //     this.setState({
    //       visible,
    //     });
    //   };
render(){
    return(
      //通知栏滚动
      <div>
            {/* 通知栏滚动 */}
          {/* <div>
          <WhiteSpace size="lg" />
          <NoticeBar marqueeProps={{ loop: true, style: { padding: '0 7.5px' } }}>
           {this.state.gedanming}
          </NoticeBar>
        </div> */}
            <div className={Mycss.shangmian}>
            <div className={Mycss.topest}><img src={houtui} alt="" className={Mycss.backicon} onClick={this.back.bind(this)}/><div className={Mycss.gedantou}>歌单</div>
            <img src={gedansousuo} alt="" className={Mycss.gedansousuo}/>
            {/* <div>
      <NavBar
        mode="light"
        rightContent={
          <Popover 
            overlayClassName="fortest"
            overlayStyle={{ color: 'currentColor' }}
            visible={this.state.visible}
            overlay={[
              (<Item key="4" value="scan" icon={myImg('tOtXhkIWzwotgGSeptou')} data-seed="logId">Scan</Item>),
              (<Item key="5" value="special" icon={myImg('PKAgAqZWJVNwKsAJSmXd')} style={{ whiteSpace: 'nowrap' }}>My Qrcode</Item>),
              (<Item key="6" value="button ct" icon={myImg('uQIYTFeRrjPELImDRrPt')}>
                <span style={{ marginRight: 5 }}>Help</span>
              </Item>),
            ]}
            align={{
              overflow: { adjustY: 0, adjustX: 0 },
              offset: [-10, 0],
            }}
            onVisibleChange={this.handleVisibleChange}
            onSelect={this.onSelect}
          >
            <div style={{
              height: '100%'
            }}
            >
              <Icon type="ellipsis" />
            </div>
          </Popover>
        }
      >
      </NavBar>
    </div> */}
            </div>
            <div className={Mycss.gedanmiaoshu}><img src={this.state.fengmian} alt="" className={Mycss.fengmian}/>
            <div className={Mycss.gedanmingzi}>{this.state.gedanming}
            <div className={Mycss.zuozhexinxi}><img src={this.state.zuozhetouxiang} alt="" className={Mycss.zuozhetouxiang}/>
            <div className={Mycss.zuozhe}>{this.state.zuozhe} ></div>
            </div>
            <div className={Mycss.yinyong}>{this.state.description} ></div>
            </div></div>
            <div className={Mycss.fouricons}>
  <div className={Mycss.jihe}><div><img src={pinglun} alt="" className={Mycss.pinglunicon}/>{this.state.pinglun}</div></div>
            <div className={Mycss.jihe}><div><img src={share} alt="" className={Mycss.pinglunicon}/>{this.state.share}</div></div>
            <div className={Mycss.jihe}> <div><img src={xiazai} alt="" className={Mycss.pinglunicon}/>下载</div></div>
            <div className={Mycss.jihe}> <div><img src={duoxuan} alt="" className={Mycss.pinglunicon}/>多选</div></div>
            </div>
            </div>
            <div className={Mycss.xiamian}>
              <div className={Mycss.xiamianhead}><img src={bofang} alt="" className={Mycss.bofangicon}/>
              <div className={Mycss.bofangquanbu}>播放全部<div className={Mycss.yigong}>(共{this.state.yigong}首)</div></div>
            <div className={Mycss.shoucangliang}><img src={shoucang} alt="" className={Mycss.shoucangicon}/>
            <div className={Mycss.shoucangshu}>{this.state.shoucangliang}</div></div>
              </div>
              <ul className={Mycss.playlists}>
        {this.state.gequ.map((item,index)=><li key={index} className={Mycss.gequs} onClick={this.sendId.bind(this,item.id)}><div className={Mycss.xuhao}>{index+1}</div>
          <div className={Mycss.gequmingzi}>{item.name}<span className={Mycss.gequxinxi}>{item.alia.length===0?"":(`(${item.alia[0]})`)}</span>
           <div className={Mycss.fuxinxi}><div className={Mycss.sq}>SQ</div>
  <div className={Mycss.fuxinxi2}>
  <div className={Mycss.singer}>{item.ar.length===1?`${item.ar[0].name} -`:`${item.ar[0].name}/${item.ar[1].name} -`} {item.al.name}</div>
    </div>
           </div>
            </div></li>)}
              </ul>
            </div>
            {/* <Route path="/playlist/song" component={Song}></Route> */}
    </div>
    )
}
}
export default Playlist